@import "../../designer/common/DesignerStyle.less";

.lc-config-panel {
  z-index: 1;
  animation: lcFadeInUp 0.7s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 330px;
  top: 50px;
  right: 35px;
  position: absolute;
  height: calc(100% - 90px);
  background-color: @rightConfigPanelBgColor;
  border-left: 1px solid #2e2e2e;

  .lc-panel-top {
    width: 100%;
    height: 30px;
    display: flex;
    color: @rightConfigPanelTitleColor;
    padding: 5px 10px;
    align-items: center;
    background-color: @rightConfigPanelTitleBgColor;
    justify-content: space-between;

    .panel-operate {
      padding: 4px 8px;
    }
    .panel-operate:hover {
      cursor: pointer;
    }
  }

  .lc-panel-content {
    height: calc(100% - 30px);
    overflow-y: auto;
    padding: 10px;
  }
}


@keyframes lcFadeInUp {
  0% {
    z-index: -1;
    opacity: 0;
    transform: translateX(35px);
  }
  50% {
    z-index: -1;
    opacity: 1;
    transform: translateX(35px);
  }
  55% {
    z-index: -1;
    opacity: 1;
    transform: translateX(35px);
  }
  100% {
    z-index: -1;
    opacity: 1;
    transform: translateX(0);
  }

}